<template>
  <div id="basicLayout">
    <a-layout class="layout">
      <a-layout-header class="header">
        <Header />
      </a-layout-header>
      <a-layout-content class="content">
        <router-view></router-view>
      </a-layout-content>
      <!--      <a-layout-footer class="footer">底部</a-layout-footer>-->
    </a-layout>
  </div>
</template>

<script setup lang="ts">
import Header from "@/components/layout/HeaderComponent.vue";
</script>

<style scoped>
#basicLayout {
  min-height: 100vh;
}

.layout {
  min-height: 100vh;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0;
  height: 15vh;
  background: #000;
}

.content {
  margin-top: 15vh;
  background: #000;
  min-height: calc(85vh - 43px);
}

.footer {
  background-color: red;
  padding: 10px;
  text-align: center;
  height: 43px;
}
</style>
